// 头部
#header {
    width: 100%;
    height: auto;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;

    .navbar {
        background-color: #000000;
        padding: 1em 0;
        border-radius: 0;
        border: 0;
        margin-bottom: 0;

        .container {
            .navbar-header {
                .navbar-brand {
                    padding: 0px 15px;
                }
            }

            .collapse {
                ul {
                    margin-top: 0.6em;

                    li {
                        a {
                            color: #fff;
                            font-family: OSBold;
                            text-transform: uppercase;
                            font-size: 1em;

                        }
                    }
                }
            }
        }
    }
    @media screen and (max-width:450px) {
        .navbar .container .collapse .nav {
            text-align: center;

            li {
                overflow: hidden;
            }

            li a:hover {
                transform: scaleX(1.2);
            }
        }
    }
}

// banner图
.banner {
    width: 100%;
    height: auto;
    position: relative;
    background: url('../images/slider1.jpeg') no-repeat left top;
    background-size: 100%;

    .container {
        width: 100%;
        position: relative;
        .desc {
            max-width: 50em;
            margin: 12% auto;

            h1 {
                font-size: 5em;
                color: #fff;
                font-family: OSBold;
                padding-top: 5%;
                text-transform: uppercase;
                border: none;
                line-height: 1.3em;
                margin-bottom: 5%;
            }

            .button {
                text-align: center;

                a {
                    display: inline-block;
                    width: 8em;
                    height: 2.5em;
                    line-height: 2.5em;
                    background-color: #000000;
                    color: #fff;
                    font-size: 1.5em;
                    text-transform: uppercase;
                    text-decoration: none;
                }
            }
        }
    }
    @media screen and (max-width:850px) {
        .container {
            .desc {
                margin: 5% auto;
                h1{
                    font-size: 3em;
                }
            }
        }

    }

    @media screen and (max-width:700px) {
        .container {
            .desc {
                margin: 5% auto;

                h1 {
                    font-size: 3em;
                }

                .button {
                    a {
                        font-size: 1em;
                    }
                }
            }
        
        }
    }
    @media screen and (max-width:450px) {
        .container {
            .desc {
                margin: 3% 1em 1%;

                h1 {
                    font-size: 1.5em;
                }

                .button {
                    a {
                        font-size: 0.8em;
                        margin-bottom: 4%;
                    }
                }
            }

        }
    }
}


// snowboards
.snowboards {
    width: 100%;

    .container {
        width: 100%;
        text-align: center;
        margin-top: 2em;
        overflow: hidden;

        h1 {
            font-size: 4em;
            text-transform: uppercase;
        }

        p {
            font-size: 1em;
            text-transform: uppercase;
            margin-bottom: 1.8em;
        }

        img {
            margin-bottom: 7em;
        }

        .imgs {
            display: flex;
            justify-content: center;
            align-items: center;

            li {
                img {
                    margin: 0 2em;
                }
            }

        }
    }
    @media screen and (max-width:850px) {
        .container{
            h1{
                font-size: 2.5em;
            }
            img{
                margin-bottom: 4em;
            }
            .imgs{
                justify-content: space-between;
                li{
                    img{
                        margin: 0;
                    }
                }
            }
        }
        
    }
    @media screen and (max-width:500px) {
        .container{
            h1{
                font-size: 1.3em;
            }
            p{
                font-size: 0.8em;
            }
            img{
                margin-bottom: 2em;
            }

        }
    }
}

// mountains  
.mountains {
    width: 100%;
    margin: 5em 0 2em;
    
    background: url(../images/bg\ image.png) no-repeat left top;
    background-size: 100%;

    .container {

        .desc {
            width: 53%;
            color: #fff;
            margin: 15em 0;
            h1 {
                font-size: 4.5em;
                line-height: 1.2em;
                text-transform: uppercase;
            }

            p {
                font-size: 1.2em;
                line-height: 2.2em;
                margin: 1.5em 0;
            }
        }
    }
    @media screen and (max-width:1200px) {
        .container{
            .desc{
                margin: 8em 0;
                h1{
                    font-size: 3em;
                }
            }
        }
    }
    @media screen and (max-width:1000px) {
        .container{
            .desc{
                margin: 4em 0;
                h1{
                    font-size: 2em;
                }
                p{
                    line-height: 1.2em;
                    margin: 0.5em 0;
                    font-size: 1em;
                }
            }
        }
    }
    @media screen and (max-width:700px) {
        .container{
            .desc{
                width: 100%;
                margin: 2em 0;
                h1{
                    font-size: 1.5em;
                }
            }   
        }
    }
    @media screen and (max-width:480px) {
        &{
            background-size: 118%,110%;
            .container{
                padding-left: 1em;
                padding-right: 1em;
                .desc{
                    margin: 1em 0;
                    
                    h1{
                        font-size: 1em;
                        br{
                            display: none;
                        }
                    }
                    p{
                        font-size: 0.8em;
                        margin: 0.5em 0;
                    }
                }
            }
        }
        
    }
}

// Features
.features {
    width: 100%;
    padding: 0em 0em 2em;

    .container {
        text-align: center;

        .title {
            h1 {
                font-size: 5em;
                text-transform: uppercase;
            }
        }

        .imgs {
            display: flex;
            justify-content: space-between;
            margin-top: 5em;

            .demo {
                width: 23%;
                text-align: left;

                p {
                    margin-top: 1em;
                    font-size: 1.2em;
                    line-height: 2em;
                    font-family: OSBold;
                }
            }
        }
    }

    @media screen and (max-width:1200px) {
        .container {
            width: 100%;

            .title {
                h1 {
                    font-size: 4em;
                }
            }

            .imgs {
                display: block;

                .demo {
                    width: 100%;
                    display: flex;
                    margin: 1em 0;
                    align-items: center;

                    .tu {
                        flex-shrink: 0;
                    }

                    p {
                        margin-left: 2em;
                    }
                }
            }
        }
    }

    @media screen and (max-width:800px) {
        .container {
            .title {
                h1 {
                    font-size: 2em;
                }
            }

            .imgs {
                margin-top: 2em;

                .demo {
                    .tu {
                        width: 40%;
                    }

                    p {
                        font-size: 1em;
                        line-height: 1.2em;
                    }
                }
            }
        }
    }
    @media screen and (max-width:500px) {
        .container{
            .title{
                h1{
                    font-size: 1.3em;
                }
            }
        }
    }
}

// foot
.foot {
    width: 100%;
    background-color: #000000;
    padding: 3em 0 2em;
    color: #fff;

    .container {
        .desc {
            display: flex;
            justify-content: space-between;
            .demo {
                
                .name {
                    h3 {
                        font-size: 1.5em;
                        text-transform: uppercase;
                        font-family: OSBold;
                    }
                }
                ul{
                    li{
                        font-family: OSLight;
                        line-height: 3em;
                    }
                }
                .inputbox{
                    display: flex;
                    input{
                        width: 10em;
                        height: 2.5em;
                        border: none;
                        text-indent: 0.5em;
                    }
                    div{
                        width: 3em;
                        height: 2.5em;
                        line-height: 2.5em;
                        text-align: center;
                        background-color: #c7c7c7;
                        color: #000000;
                        font-family: OSBold;
                        border: none;
                    }
                }
                .icon{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 2em;
                }
            }
        }
        .footer{
            display: flex;
            justify-content: space-between;
        }
    }
    @media screen and (max-width:1000px) {
        .container{
            .desc{
               display: block; 
               text-align: center;
               .demo{
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-content: center;
                align-items: center;
                .name{
                    h3{
                        font-size: 1.3em;
                    }
                }
                ul{
                    li{
                        line-height: 1.5em;
                    }
                }
                .icon{
                    justify-content: flex-start;
                }
               }
            }
        }
    }
    @media screen and (max-width:370px) {
        .container{
            .footer{
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
                align-content: center;
            }
        }
    }
    
}